<template>
	<div class="sku-wrap">
		<div class="add-btn iconfont icon-close" @click="showSkuDialog=true">
			<slot></slot>
		</div>
		<el-dialog title="新增商品规格" :visible.sync="showSkuDialog" fullscreen append-to-body>
			<div class="content-box block">
				<el-form ref="skuForm" :model="model" :rules="rules" label-position="right"  label-width="100px">
					<div class="tab-content">
						<el-form-item prop="remark" label="类别名称">
							<el-input v-model="model.remark" placeholder="如:服装类，最多250字符" clearable></el-input>
						</el-form-item>
						<el-form-item prop="title" label="规格名称">
							<el-input v-model="model.title" placeholder="如:颜色，128字符内" clearable></el-input>
						</el-form-item>
						<el-form-item label="规格列表">
							<el-button type="primary" size="small" icon="el-icon-plus"@click="addRow">添加</el-button>
							<el-button type="danger" size="small" icon="el-icon-delete"@click="removeRow">删除</el-button>
						</el-form-item>
						<el-form-item>
							<el-card class="table-card">
								<el-table ref="skusTable" :data="model.children" class="table-form" @selection-change="handleSelectionChange">
									<el-table-column type="selection" width="45"></el-table-column>
									<el-table-column width="110" prop="imgUrl" label="规格图片">
										<template slot-scope="scope">
											<el-form-item :prop="'children.' + scope.$index + '.imgUrl'" style="margin:auto">
												<dt-upload v-model="scope.row.imgUrl" :boxwh="40"></dt-upload>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column min-width="120" prop="title" label="规格文字">
										<template slot-scope="scope">
											<el-form-item :prop="'children.' + scope.$index + '.title'" :rules='rules.children.title' style="margin:auto">
												<el-input size="small" v-model="scope.row.title" placeholder="必填，规格文字"></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column fixed="right" width="60" label="操作" align="center">
										<template slot-scope="scope">
											<el-link :underline="false" icon="el-icon-delete" @click="removeRow(scope.$index)"></el-link>
										</template>
									</el-table-column>
								</el-table>
							</el-card>
						</el-form-item>
					</div>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" :loading="loading" @click="submitForm">确认保存</el-button>
				<el-button @click="showSkuDialog = false">返回</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import DtUpload from '../components/DtUpload.vue'
	
	export default {
		components: {
			DtUpload
		},
		data() {
			return {
				loading: false,
				showSkuDialog: false,
				multipleSelection: [],
				model: {
					id: 0,
					merchantId: 0,
					title: null,
					imgUrl: null,
					remark: null,
					sortId: 99,
					addBy: null,
					addTime: null,
					children: []
				},
				rules: {
					title: [
						{ required: true, message: '请输入规格名称', trigger: 'blur' }
					],
					remark: [
						{ required: true, message: '请输入类别名称', trigger: 'blur' }
					],
					children: {
						title: [
							{ required: true, message: '请输入规格值', trigger: 'blur' }
						]
					}
				}
			}
		},
		methods: {
			//提交表单
			submitForm() {
				let _this = this; //当前页面
				//多个表单验证
				const f1 = new Promise((resolve, reject) => {
					_this.$refs['skuForm'].validate((valid) => {
						if (valid) resolve()
					});
				});
				Promise.all([f1]).then(() => {
					//检查规格值
					if (_this.model.children.length === 0) {
						_this.$message({ type: 'warning', message: '错误提示：请添加规格值后提交' });
						return false;
					}
					_this.$api.request({
						method: 'post',
						url: '/merchant/shop/sku',
						data: _this.model,
						beforeSend() {
							_this.loading = true
						},
						success(res) {
							//回调事件
							_this.$emit('change',res.data);
							//重置表单
							_this.$refs['skuForm'].resetFields();
							//关闭窗体
							_this.showSkuDialog = false;
						},
						complete() {
							_this.loading = false
						}
					});
				})
			},
			removeRow(index) {
				let _this = this; //当前页面
				if (typeof(index)=='number') {
					_this.model.children.splice(index, 1);
				} else {
					let list = _this.multipleSelection; //拿到选中的数据
					if (list.length > 0) {
						list.forEach((item, index) => {
							//遍历源数据
							_this.model.children.forEach((v, i) => {
								//如果选中数据和源数据的某一条唯一标识符相等，删除对应的源数据
								if (item == v) {
									_this.model.children.splice(i, 1);
								}
							})
						});
					}
					//清除选中状态
					_this.$refs.skusTable.clearSelection();
				}
			},
			addRow() {
				this.model.children.push({
					id: 0,
					parentId: 0,
					title: '',
					imgUrl: null,
					remark: null,
					sortId: 99
				});
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
		},
		created() {
			
		}
	}
</script>

<style lang="scss">
	.sku-wrap {
		flex-shrink: 0;
		.add-btn {
			margin-left: 5px;
			padding: 0 13px;
			border-radius: 4px;
			border: 1px solid #DCDFE6;
			box-sizing: border-box;
			background: #fff;
			color: #b3b7be;
			height: 40px;
			line-height: 40px;
			cursor: pointer;
			&:hover {
				color: #606266;
				border-color: #c6c9cf;
			}
			.text{
				margin-left: 2px;
				font-size: 14px;
			}
		}
	}
</style>